<template>

        <el-form :model="user">
            <!-- 用户名 -->
            <el-form-item label="用户名称">
            <el-input v-model="user.username" />
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="用户密码">
            <el-input type="password" v-model="user.password"/>
            </el-form-item>

            <!-- 邮箱 -->
            <el-form-item label="用户邮箱">
            <el-input v-model="user.email" />
            </el-form-item>

            <!-- 非管理员用户上传头像 -->
            <el-form-item label="修改用户头像：" v-if="role!='管理员登录'">
                <template>
                <el-upload
                    action="http://localhost:30000/upload"
                    list-type="picture-card"
                    :on-success="handleAvatarSuccess"
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="user.avator" alt="Preview Image" />
                </el-dialog>
                </template>
            </el-form-item>

            <!-- 修改个人信息 -->
            <el-form-item>
              <el-button style="width:250px" @click="update()">修改个人信息</el-button>
            </el-form-item>

        </el-form>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      user: {},
      role: ''
    }
  },
  created () {
    // 获得角色信息
    this.role = window.sessionStorage.getItem('role')

    // 获得用户信息
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  methods: {

    // 处理图片上传成功的响应事件
    handleAvatarSuccess(file, fileList) {
        this.user.photo = file
    },
        
    // 客户修改个人信息
    update() {
      
      if (this.role == '老师') {
        this.$http.put('/teacher', this.user).then(response => {
                this.$message({
                    type: 'success',
                    message: '修改信息成功，请重新登录'
                })
                window.sessionStorage.clear()
                this.$router.push('/')
        })
      } else {
        this.$http.put('/student', this.user).then(response => {
                this.$message({
                    type: 'success',
                    message: '修改信息成功，请重新登录'
                })
                window.sessionStorage.clear()
                this.$router.push('/')
        })
      }
    }

  }
}
</script>
<style>
</style>